<template>
  <v-container
    id="user-profile"
    fluid
    tag="section"
  >
    <base-material-snackbar
      v-model="snackbar_visible"
      :type="snackbar_color"
      v-bind="{
        'bottom': true,
        'right': true
      }"
      style="margin-top: -2.5rem"
    >
      {{operation_info}}
    </base-material-snackbar>
    <v-row justify="center">
      <v-col
        cols="12"
        md="4"
      >
        <base-material-card
          class="v-card-profile"
          avatar="https://images.unsplash.com/photo-1604502827601-458f47817605?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixlib=rb-1.2.1&q=80&w=500"
        >
          <v-card-text class="text-center">
            <h6 class="display-1 mb-1 grey--text font-weight-light">
              {{$store.state.dept_str[$store.state.department_id]}} {{$store.state.auth_str[$store.state.auth]}}
            </h6>

            <h4 class="display-2 font-weight-light mb-3 black--text">
              {{$store.state.emp_name}}
            </h4>
          </v-card-text>
        </base-material-card>
      </v-col>
      <v-col
        cols="12"
        md="8"
      >
        <base-material-card
          icon="mdi-account"
          title="个人信息"
          class="px-4 py-3"
        >
          <v-form>
            <v-container class="py-0">
              <v-row>
                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="员工编号"
                    :value="$store.state.username"
                    disabled
                  />
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    class="purple-input"
                    label="所属部门"
                    :value="$store.state.dept_str[$store.state.department_id] + ' | ' + $store.state.department"
                    disabled
                  />
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="部门编号"
                    class="purple-input"
                    disabled
                    :value="$store.state.department_id"
                  />
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-select
                    v-model="gender"
                    :items="gender_types"
                    item-text="type_CN"
                    item-value="value"
                    label="员工性别"
                    persistent-hint
                    return-object
                    single-line
                  ></v-select>
                </v-col>
                <v-col
                  cols="12"
                  md="4"
                >
                  <v-text-field
                    label="入职日期"
                    class="purple-input"
                    :value="$store.state.entry_date"
                    disabled
                  />
                </v-col>

                <v-col
                  cols="12"
                  md="4"
                >
                  <v-menu
                    v-model="birthday_menu"
                    :close-on-content-click="false"
                    :nudge-right="40"
                    transition="scale-transition"
                    offset-y
                  >
                    <template v-slot:activator="{ on, attrs }">
                      <v-text-field
                        v-model="birthday"
                        label="员工生日"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                      >
                      </v-text-field>
                    </template>
                    <v-date-picker
                      header-color="transparent"
                      v-model="birthday"
                      @input="birthday_menu = false"
                      no-title
                      color="green lighten-1"
                    ></v-date-picker>
                  </v-menu>
                </v-col>

                <v-col
                  cols="12"
                  class="text-right"
                >
                  <v-btn
                    color="success"
                    class="mr-0"
                    @click="update_profile"
                  >
                    Update Profile
                  </v-btn>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
        </base-material-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      gender_types: [
      {value: 1, type_CN: '男性', type_EN: 'male'},
      {value: 2, type_CN: '女性', type_EN: 'female'}
      ],
      gender: {value: 0, type_CN: '', type_EN: ''},
      birthday_menu: false,
      birthday: '1990-01-01',
      // 操作提示框
      snackbar_visible: false,
      snackbar_color: 'success',
      operation_info: '',
    }),
    methods: {
      update_profile() {
        let that = this;
        let put_profile = {
          Employee: {
            empID: that.$store.state.username,
            gender: that.gender.type_EN,
            birthday: that.birthday
          }
        }
        fetch('http://localhost:9095/AttendanceSystem/employee', {
          method: 'PUT',
          headers: new Headers({
            'username': that.$store.state.username,
            'Token': that.$store.state.token,
            'Content-Type': 'application/json'
          }),
          body: JSON.stringify(put_profile)
        }).then(res => {
          if (res.ok) {
            that.snackbar_color = 'success';
            that.operation_info = '修改成功';
            that.snackbar_visible = true;
          }
          else {
            that.snackbar_color = 'error';
            that.operation_info = res.status + ' - 修改失败';
            that.snackbar_visible = true;
          }
        })
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.birthday = vm.$store.state.birthday
        if (vm.$store.state.gender == 'male') {
          vm.gender = vm.gender_types[0];
        }
        else {
          vm.gender = vm.gender_types[1];
        }
      })
    }
  }
</script>
